<template>
  <div class="newstore-wrap">
    <!-- 版心1090 -->
    <div class="newstore-container">
      <div class="header">
        <div class="header-left">
          <h3>
            <span @click="toNewGoods">新品首发</span>
          </h3>
          <p>为你寻觅世间好物</p>
        </div>
        <div class="header-right">
          <span href="#">更多新品 ></span>
        </div>
      </div>
      <!-- 轮播图位置 -->
      <div class="body">
        <div class="swiper-container swiper" ref="swiper">
          <!-- 轮播 -->
          <div class="swiper-wrapper">
            <!-- 每一个item -->
            <div
              class="swiper-slide"
              v-for="(newItem, index) in newItemList"
              :key="index"
              @click="handleDetail"
            >
              <div class="body-item">
                <div class="store-img">
                  <img class="img" :src="newItem.primaryPicUrl" alt="" />
                  <img
                    class="img-hidden"
                    :src="newItem.listPicUrl"
                    alt=""
                    :data-id="newItem.id"
                  />
                </div>
                <span class="store-introduce" :data-id="newItem.id">
                  {{ newItem.name }}
                </span>
                <p class="store-price">
                  <span class="price-height">
                    {{ newItem.counterPrice ? newItem.counterPrice : '无价格' }}
                  </span>
                  <span class="price-low">￥暂无数据</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 底部分页器 -->
          <!-- <div class="swiper-pagination"></div> -->
        </div>
        <!-- 左右翻页器 -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: 'NewStore',
  props: ['newItemList'],
  data() {
    return {}
  },
  methods: {
    // 跳转到详情页
    handleDetail(event) {
      // const id = event.target.dataset.id
      this.$emit('toDetail', event)
    },
    // 跳转到新品首发页面
    toNewGoods() {
      this.$router.history.push({
        path: '/newgoods',
      })
    },
  },
  watch: {
    newItemList: {
      handler(newItemList) {
        // 如果没有数据,不加载
        if (!newItemList.length) return
        // dom页面渲染完成后再启用轮播图
        this.$nextTick(() => {
          // 轮播图效果
          new Swiper(this.$refs.swiper, {
            // 每页显示4张轮播图
            slidesPerView: 4,
            // 滚动一次走4张
            slidesPerGroup: 4,
            // 两张之间的距离
            // spaceBetween: 10,
            // 左右箭头
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          })
        })
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.newstore-wrap {
  margin-top: 30px;
  width: 100%;
  padding-bottom: 100px;
  .newstore-container {
    margin: 0 auto;
    width: 1090px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 30px;
  .header-left {
    display: flex;
    align-items: flex-end;
    h3 {
      font-size: 28px;
      margin-right: 20px;
      span {
        // text-decoration: none;
        color: #333;
      }
      span:hover {
        color: #e2c199 !important;
      }
    }
    p {
      font-size: 14px;
      padding-bottom: 3px;
    }
  }
  .header-right {
    padding-bottom: 3px;
    span {
      // text-decoration: none;
      font-size: 14px;
      color: #333;
    }
    span:hover {
      color: #e2c199 !important;
    }
  }
}
// 翻页器和分页器样式
.body {
  // --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 20px; /* 设置按钮大小 */
}
// 左右翻页器样式
.body {
  position: relative;
  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background-color: #e2c199;
  }
  .swiper-button-next {
    right: -55px;
  }
  .swiper-button-next:hover {
    background-color: #cc9756;
  }
  .swiper-button-prev {
    left: -55px;
  }
  .swiper-button-prev:hover {
    background-color: #cc9756;
  }
}
.my-button-disabled {
  background-color: #e7e2d7;
}
// .body {
//   position: relative;
// }
.body-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 265px;
  .store-img {
    position: relative;
    width: 265px;
    height: 265px;
    background-color: #f4f4f4;
    .img,
    .img-hidden {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .img-hidden {
      display: none;
    }
  }

  .store-introduce {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    width: 160px;
    &:hover {
      color: #d6bd8d;
    }
  }
  .store-price {
    padding: 5px 0 10px;
    .price-height {
      color: red;
      font-size: 14px;
      margin-right: 5px;
    }
    .price-low {
      text-decoration: line-through;
      color: #999;
      font-size: 13px;
    }
  }
}
.body-item:hover {
  background-color: #f4f0ea;
  .img-hidden {
    display: block;
  }
  .img {
    display: none;
  }
}
</style>
